<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "0px"
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3"],
      chart: {}
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        backgroundColor: "#FFF",
        color: this.color,
        // title: {
        // text: "个",
        // left: 20,
        //   textStyle: {
        //     color: "#999",
        //     fontSize: "12"
        //   }
        // },
        tooltip: {
          trigger: "axis",
          // formatter(p) {
          // console.log(p[0].name)
          // var y_name = p[0].name
          // p.forEach((item, index) => {
          //   if (index === that.origin.length) {
          //     return
          //   }
          //   y_name += `<p>${item.marker}${item.seriesName}：${
          //     item.value === undefined ? "-" : item.value
          //     } 个</p>`
          // })
          // return y_name
          // }
        },
        axisPointer: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#000"
          },
          label: {
            show: true,
            color: "#fff",
            backgroundColor: "rgba(0, 0, 0, 1)"
          }
        },
        grid: {
          // left: 60,
          // right: 30,
          bottom: 60
        },
        legend: {
          itemWidth: 20,
          itemHeight: 10,
          // right: 0,
          textStyle: {
            color: "#90979c",
            fontSize: "12"
          },
          data: that.origin.map((item, index) => {
            return { name: item.name, icon: "roundRect" }
          })
        },
        dataZoom: [
          {
            show: true,
            height: 30,
            bottom: 0,
            start: 0,
            end: 100,
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#999"
            }
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 0,
            end: 100
          }
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#e5e5e5"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#999999"
            },
            // 两侧留白距离
            boundaryGap: true,
            data: that.origin[0].time.map((item, index) => {
              return item
            })
          }
        ],
        yAxis: [
          {
            name: "个",
            nameTextStyle: {
              padding: [0, 20, 20, 0]
            },
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                type: "dotted"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 0
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: that.origin.map((item, index) => {
          return {
            name: item.name,
            barMaxWidth: 24,
            type: "bar",
            stack: "total",
            data: item.value.map((item, index) => {
              return item
            })
          }
        })
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true)
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 1,
        dataIndex: 1
      })
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
      window.addEventListener("resize", () => {
        this.chart.resize()
      })
    },
    rgba_color(color) {
      var color_arr = []
      for (let i = 0; i < color.length; i++) {
        let num = color[i].split("#")[1]
        color_arr.push({
          a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
          b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.1)`
        })
      }
      return color_arr
    }
  }
}
</script>
